let selectedElement = null;

document.getElementById('startSelect').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: initializeElementSelection
  });
  
  await chrome.scripting.insertCSS({
    target: { tabId: tab.id },
    css: `
      [data-extension-selected="true"] {
        outline: 2px solid red !important;
      }
    `
  });
  
  window.close();
});

document.getElementById('confirmEdit').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const newContent = document.getElementById('newContent').value;
  
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: updateElementContent,
    args: [newContent]
  });
  
  window.close();
});

document.getElementById('cancelEdit').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      const selected = document.querySelector('[data-extension-selected="true"]');
      if (selected) {
        selected.removeAttribute('data-extension-selected');
      }
    }
  });
  
  window.close();
});

function updateElementContent(newContent) {
  const selectedElement = document.querySelector('[data-extension-selected="true"]');
  if (selectedElement) {
    selectedElement.textContent = newContent;
    selectedElement.removeAttribute('data-extension-selected');
  }
}

function initializeElementSelection() {
  const prevSelected = document.querySelector('[data-extension-selected="true"]');
  if (prevSelected) {
    prevSelected.removeAttribute('data-extension-selected');
  }
  
  function handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    
    const element = event.target;
    element.setAttribute('data-extension-selected', 'true');
    
    const editPanel = document.createElement('div');
    editPanel.style.cssText = `
      position: fixed;
      top: ${event.clientY + 10}px;
      left: ${event.clientX + 10}px;
      background: white;
      padding: 10px;
      border: 1px solid #ccc;
      z-index: 10000;
    `;
    
    editPanel.innerHTML = `
      <input type="text" id="inlineEdit" placeholder="输入新内容">
      <button id="inlineConfirm">确定</button>
      <button id="inlineCancel">取消</button>
    `;
    
    document.body.appendChild(editPanel);
    
    const input = editPanel.querySelector('#inlineEdit');
    input.value = element.textContent;
    input.focus();
    
    editPanel.querySelector('#inlineConfirm').onclick = () => {
      element.textContent = input.value;
      element.removeAttribute('data-extension-selected');
      editPanel.remove();
    };
    
    editPanel.querySelector('#inlineCancel').onclick = () => {
      element.removeAttribute('data-extension-selected');
      editPanel.remove();
    };
    
    document.body.style.cursor = 'default';
    document.removeEventListener('click', handleClick, true);
  }
  
  document.body.style.cursor = 'pointer';
  document.addEventListener('click', handleClick, true);
} 